import { townList, districtName } from '@/data/map'
import Map from './map'
import { useMapStore } from '@/stores/map'

const mapStore = useMapStore()

class District extends Map {
  constructor(...args) {
    super(...args)
  }

  beforeInitDistrictMap() {
    this.label = new AMap.Marker({
      anchor: 'center',
      visible: false,
      offset: new AMap.Pixel(50, -50),
    })

    this.label.on('click', e => {
      if (this.options.townLabelOnClick) this.options.townLabelOnClick(this.town)
    })

    this.map.add(this.label)
  }

  // 创建多边形之后
  afterCreatePolygon(polygon, gjson) {
    const name = gjson.properties.name

    // 点击绘制的区域时执行其他交互
    polygon.on('click', e => {
      const townItem = townList[name]

      if (this.options.townMapOnClick) this.options.townMapOnClick(townItem, gjson.geometry.coordinates)

      // this.clearMap()
      // this.setSubMap(townItem, gjson.geometry.coordinates)
    })

    if (name == districtName) return

    // 鼠标经过
    polygon.on('mouseover', e => {
      const townItem = townList[name]
      if (!townItem) return

      this.town = name

      polygon.setOptions({
        fillColor: this.config.bgHover,
      })

      const obj = mapStore?.mapCollectionPointNum?.find(item => item.label === name) || {}

      const html = `<div class="mark">
            <div class="name">${name}</div>
            <div class="value"><em>采样点：</em>${obj?.value || 0}<em>个</em></div>
          </div>`
      this.label.setContent(html)
      this.label.setPosition(townItem.center)
      this.label.show()
    })

    // 鼠标移除
    polygon.on('mouseout', e => {
      polygon.setOptions({
        fillColor: this.config.bg,
      })
    })
  }

  // 清除地图
  clearMap() {
    // this.map.add(
    //   new AMap.TileLayer.RoadNet({
    //     rejectMapMask: true,
    //   })
    // )
    this.map.clearMap() // 清除所有覆盖物
    if (this.cluster) this.cluster.setMap(null)

    // this.map.setMask(null)
    // this.map.setLabelRejectMask(true)

    // this.object3Dlayer.clear()
    // this.map.remove(this.object3Dlayer)
  }

  // 设置子地图(乡镇)
  setSubMap(townItem, ponit) {
    this.map.setZoom(12)
    this.map.setZooms([8, 20])
    this.map.setFeatures(['bg', 'point', 'road', 'building'])
    this.map.setCenter(townItem.center)

    ponit.map(item => {
      let polygon = new AMap.Polygon({
        map: this.map, // 指定地图对象
        strokeWeight: 1, // 轮廓线宽度
        path: item, //轮廓线的节点坐标数组
        fillOpacity: 0.15, //透明度
        fillColor: '#256edc', //填充颜色
        strokeColor: '#256edc', //线条颜色
      })
    })

    // this.map.setFitView()

    if (this.options.townMapOnClick) this.options.townMapOnClick(townItem, ponit)
  }

  // 添加点标记
  addPointMark(data) {
    // const hoverMarker = new AMap.Marker({
    //   anchor: 'center',
    //   visible: false,
    // })
    // const addMarker = item => {
    //   const position = item['行政村坐标'].split(',')
    //   const title = item['行政村']
    //   var marker = new AMap.Marker({
    //     position, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //     title,
    //     // offset: new AMap.Pixel(-21, -21),
    //   })
    //   marker.on('click', e => {
    //     if (this.options.hamletPointOnClick) this.options.hamletPointOnClick(item)
    //   })
    //   // 鼠标经过
    //   marker.on('mouseover', e => {
    //     hoverMarker.setContent(`<div class="village-maker">${title}</div>`)
    //     hoverMarker.setPosition(position)
    //     hoverMarker.show()
    //   })
    //   // 鼠标移除
    //   marker.on('mouseout', e => {
    //     hoverMarker.hide()
    //   })
    //   this.map.add(marker)
    // }
    // for (const key in data) {
    //   const item = data[key]
    //   item['村数据'].map(item => {
    //     addMarker(item)
    //   })
    // }
    // this.map.add(hoverMarker)

    const points =
      data.map(item => {
        return {
          weight: 1,
          lnglat: item?.lnglat || [],
          data: item,
        }
      }) || []

    var count = points.length
    // 数据中增加权重信息，以权重高的点为中心进行聚合
    // 本示例中北京等城市中心点权重较高
    let bgColor
    var _renderClusterMarker = function (context) {
      // 聚合中点个数
      var clusterCount = context.count
      var div = document.createElement('div')
      // 聚合点配色
      var defaultColor = ['204,235,197', '168,221,181', '123,204,196', '78,179,211', '43,140,190']
      if (clusterCount >= 0 && clusterCount < 10) {
        bgColor = defaultColor[0]
      } else if (clusterCount >= 10 && clusterCount < 100) {
        bgColor = defaultColor[1]
      } else if (clusterCount >= 100 && clusterCount < 1000) {
        bgColor = defaultColor[2]
      } else if (clusterCount >= 1000 && clusterCount < 10000) {
        bgColor = defaultColor[3]
      } else if (clusterCount >= 10000) {
        bgColor = defaultColor[4]
      }
      div.style.backgroundColor = 'rgba(' + bgColor + ',.5)'
      var size = Math.round(25 + Math.pow(clusterCount / count, 1 / 5) * 40)
      div.style.width = div.style.height = size + 'px'
      div.style.border = 'solid 1px rgba(' + bgColor + ',1)'
      div.style.borderRadius = size / 2 + 'px'
      div.innerHTML = context.count
      div.style.lineHeight = size + 'px'
      div.style.color = '#ffffff'
      div.style.fontSize = '12px'
      div.style.textAlign = 'center'
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
      context.marker.setContent(div)
    }
    var _renderMarker = function (context) {
      var content =
        '<div style="background-color: rgba(255,255,178,.9); height: 18px; width: 18px; border: 1px solid rgba(255,255,178,1); border-radius: 12px; box-shadow: rgba(0, 0, 0, 1) 0px 0px 3px;"></div>'

      // const src = getFileUrl('map/point.png')
      // const content = `
      //   <img src="${src}" style=" width: 25px; height: 25px; ">
      // `
      var offset = new AMap.Pixel(-9, -9)
      context.marker.setContent(content)
      context.marker.setOffset(offset)
    }
    this.cluster = new AMap.MarkerCluster(this.map, points, {
      gridSize: 30, // 聚合网格像素大小
      renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
      renderMarker: _renderMarker, // 自定义非聚合点样式
    })

    this.cluster.on('click', (cluster, lnglat, target, marker) => {
      if (cluster.clusterData.length == 1) {
        const data = cluster.clusterData[0].data
        if (this.options.hamletPointOnClick) this.options.hamletPointOnClick(data)
      } else {
        this.map.setZoom(this.map.getZoom() + 1)
        this.map.setCenter(cluster.lnglat)
      }
    })
  }
}

export default District
